<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>index</title>
    <script src="js/vue@3.3.4.global.js"></script>
    <script src="js/axios.js"></script>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="head clearfix">
    <h1 class="pulll_left">景区文明行为大数据统计</h1>
    <div class="menu menu2 pulll_left">
        <ul>
            <li><a href="">导航标题</a></li>
            <li><a href="">导航标题</a></li>
            <li><a href="">导航标题</a></li>
            <li><a href="">导航标题</a></li>
            <li><a href="">导航标题</a></li>
        </ul>
    </div>
    <div class="time" id="showTime"></div>
</div>
<div class="mainbox">
    <ul class="clearfix nav1">
        <li style="width: 22%">
            <div class="box">
                <div class="tit">景区垃圾总体分布</div>
                <div class="boxnav" style="height: 330px">
                    <div class="yqlist">
                        <ul class="clearfix">
                            <li>
                                <div class="yq" id="yq">2534</div>
                                <span>可回收垃圾</span>
                            </li>
                            <li>
                                <div class="yq">567</div>
                                <span>有害垃圾</span>
                            </li>
                            <li>
                                <div class="yq">56345</div>
                                <span>干垃圾</span>
                            </li>
                            <li>
                                <div class="yq">721</div>
                                <span>湿垃圾</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="tit">信誉积分</div>
                <div class="boxnav" style="height: ">
                    <div class="" style="height: 406px" id="echart2"></div>
                </div>
            </div>
        </li>
        <li style="width: 56%">
            <div class="box">
                <div class="boxnav mapc" style="height: 550px; position: relative">
                    <div class="map" id="map"></div>
                </div>
            </div>
            <div class="box">
                <div class="tit">模块3</div>
                <div class="boxnav" style="height: 250px" id="echart3"></div>
            </div>
        </li>
        <li style="width: 22%">
            <div class="box">
                <div class="tit">银行垃圾桶</div>
                <div class="boxnav" id="echart4" style="height: 200px"></div>
            </div>
            <div class="box">
                <div class="tit">调度清洁员工</div>
                <div class="boxnav" style="height: 250px" id="echart5"></div>
            </div>
            <div class="box">
                <div class="tit">模块标题</div>
                <div class="boxnav" style="height: 250px" id="echart6"></div>
            </div>
        </li>
    </ul>

    <script>
        var t = null
        t = setTimeout(time, 1000) //開始运行
        function time() {
            clearTimeout(t) //清除定时器
            dt = new Date()
            var y = dt.getFullYear()
            var mt = dt.getMonth() + 1
            var day = dt.getDate()
            var h = dt.getHours() //获取时
            var m = dt.getMinutes() //获取分
            var s = dt.getSeconds() //获取秒
            document.getElementById('showTime').innerHTML =
                y + '/' + mt + '/' + day + ' ' + h + ':' + m + ':' + s + ''
            t = setTimeout(time, 1000) //设定定时器，循环运行
        }
    </script>
</div>
</body>
</html>
